/**
 * Created by qijiahao on 2017/1/26.
 * Updated by qijiahao on 2017/2/3
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    TextInput
} from 'react-native';

export default class Comment extends Component{
    constructor(props) {
        super(props);
        this.state = {
            display: false,
            dir: 'row'
        };
    }

    changeState = () => {
        this.setState({
            display: !this.state.display,
            dir: 'column'
        })
    }


    render(rowData) {
        return(
        <View>
            {this.renderReButton()}
            {this.renderReText()}
        </View>
        )
    }
    getButton=()=>{
        if(!this.state.display){
            return(
                <View style={{flexDirection:'row'}}>
                    <View style={{flex:5}}/>
                    <View style={{flex:1}}>
                        <Text >
                            回复
                        </Text>
                    </View>
                </View>
            )
        }
    }

    renderReButton=()=>{
            return(
                <TouchableOpacity
                    onPress={()=>this.changeState()}>
                        {this.getButton()}
                </TouchableOpacity>
            )
    }


    renderReText=()=>{
        if(this.state.display){
            return(
                <View style={{flex:1}}>

                    <TextInput
                        multiline={true}
                        style={styles._textInput}>
                    </TextInput>

                    <View style={{flexDirection:'row'}}>
                        <View style={{flex:5}}/>
                        <View style={[styles.distance,{flex:2}]}>
                            <TouchableOpacity
                                onPress={()=>this.changeState()}
                                style={styles.button}>
                                    <Text>
                                        收起
                                    </Text>
                            </TouchableOpacity>

                            <TouchableOpacity
                                onPress={()=>this.changeState()}
                                style={styles.button}>
                                    <Text>
                                        发送
                                    </Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            )
        }
    }
}

const styles = StyleSheet.create({
    _textInput:{
        height:20,
        borderWidth:0.5,
        marginLeft:20,
        marginRight:20,
        marginTop:5,
        borderColor:'#CACACA'
    },

    distance:{
        flex:1,
        flexDirection:'row',
    },
    button:{
        flex:1,
        marginTop:5,
        marginLeft:3,
        marginRight:3,
    },
});